<template>
  <div class="web-home-study-time-line">
    <ul class="time-line">
      <li
        class="item"
        v-for="(v, k) in dataArr"
        :key="k">
        <span class="time">{{ v.dateStr }}</span>
        <div class="content-box">
          <i class="location">
            <icon-location
              width="30"
              height="30"
              fill="#fff"/>
          </i>
          <div class="content">
            <p class="title">{{ v.title }}</p>
            <p class="detail">{{ v.content }}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import IconLocation from '@/icons/location.svg'
  import StudyTimeLineModel from '@/models/web/StudyTimeLineModel'
  export default {
    name: "WebHomeStudyTimeLine",
    components: {
      IconLocation
    },
    data() {
      return {
        dataArr: []
      }
    },
    methods: {
      /**
       * 获取所有数据
       */
      getAllModels() {
        StudyTimeLineModel.loadAllModels().then((dataArr) => {
          this.dataArr = dataArr
        })
      },
    },
    mounted() {
      this.getAllModels()
    }
  }
</script>

<style lang="scss" scoped>
  .web-home-study-time-line {
    padding: 20px 0;
    >.time-line {
      list-style: none;
      padding: 0;
      margin: 0;
      >.item {
        display: flex;
        justify-content: center;
        >.time {
          width: 100px;
          text-align: right;
          font-weight: 300;
          color: #374054;
          padding-top: 15px;
        }
        >.content-box {
          width: 800px;
          position: relative;
          padding-left: 60px;
          margin-left: 60px;
          border-left: 2px solid #2f84d2;
          >.location {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2f84d2;
            border-radius: 50%;
            position: absolute;
            left: -25px;
            top: 0;
          }
          .content {
            background-color: #efeff3;
            padding: 10px;
            margin: 10px 0;
          }
          .title {
            font-size: 22px;
            font-weight: 300;
            color: #333;
            margin-top: 0px;
            margin-bottom: 0;
          }
          .detail {
            color: #74808a;
            margin: 10px 0 0 0;
            font-size: 16px;
          }
        }
      }
    }
  }
</style>
